<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery2.1.4.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap3.3.7.js"></script>
    <script src="vue/Vue.js"></script>
    <script src="vue/axios.js"></script>
    <link rel="stylesheet" type="text/css" href="../plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="../plugin/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="../src/lvdong/css/app.css" media="all" />
    <link rel="stylesheet" href="../src/lvdong/css/themes/default.css" media="all" id="skin" kit-skin />
    <script src="../plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    button{
        position:absolute;
        right:100px;
        bottom:100px;
    }
</style>
<body>
<div id="app">

    头像:<img :src="teacher.imagehead" style="height:50px;width:50px"/><br/>
    修改头像：<input class="file" id="inputImg" name="file" type="file"  @change="upload1" /><br/>
    <div class="layui-form-item">
        <label class="layui-form-label">账户：</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="输入账户名" class="layui-input" :value="teacher.account" v-model="teacher.account">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户：</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="输入用户名" class="layui-input" :value="teacher.name" v-model="teacher.name">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">科目：</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="输入科目" class="layui-input" :value="teacher.subject" v-model="teacher.subject">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机：</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="输入手机" class="layui-input" :value="teacher.tel" v-model="teacher.tel">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱：</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="输入邮箱" class="layui-input" :value="teacher.mailbox" v-model="teacher.mailbox">
        </div>
    </div>


    <button @click="submit" class="layui-btn" lay-submit="" lay-filter="demo1">更改</button><p style="color: red">{{message}}</p>
</div>
</body>
<script type="text/javascript">

    new Vue({
        el: '#app',
        //固定的结构
        data: { //在data定义变量和初始值
            //定义变量，值空数组
            teacher:'',
            message:""
        },
        mounted() {

            var id = window.location.href.split("=")[1];

            var params = new URLSearchParams();
            params.append("id",id);
            axios.post("/teacherInfo/findTeacherInfoById",params)
                .then(res => {
                    //console.info(res.data);
                    this.teacher=res.data;
                    this.teacher.tcId=id;
                    console.info(this.teacher.tcId);
                });
        },
        methods:{
            upload1(e){
                let file = e.target.files[0];
                let param = new FormData(); //创建form对象
                param.append('file',file);//通过append向form对象添加数据
                console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                }; //添加请求头
                axios.post('/articlerelease/upload',param,config)
                    .then(response =>{//请求成功执行then方法
                        console.log(response.data.data.url);
                        this.teacher.imagehead=response.data.data.url;
                    })
                    .catch(error =>{
                    }) //请求失败执行catch方法

            },
            submit(){
                var params = new URLSearchParams();
                params.append("tcId",this.teacher.tcId);
                params.append("account",this.teacher.account);
                params.append("name",this.teacher.name);
                params.append("subject",this.teacher.subject);
                params.append("tel",this.teacher.tel);
                params.append("mailbox",this.teacher.mailbox);
                axios.post('/teacherInfo/updateArticleById',params)
                    .then(response =>{//请求成功执行then方法
                        if(response=="1"){
                           this.message="更新失败，请稍后再试";
                        }else{
                            this.message="更新成功";
                        }
                    })
                    .catch(error =>{

                    }) //请求失败执行catch方法

            }
        }
    })
</script>
</html>